<template>
  <div></div>
</template>

<script>
import { getDevelopRate } from "../../../../service/workbenchApi";

export default {
  data() {
    return {
      dataName: [],
      dataNum: [],
      myChart2: null
    };
  },
  methods: {
    getData() {
      getDevelopRate().then(res => {
        if (res.code == 0) {
          let obj = res.data;
          this.dataName = Object.keys(obj);
          this.dataNum = Object.values(obj);
          console.log(this.dataNum)
          this.myChart2.setOption({
            xAxis: {
              data: this.dataName
            },
            series: {
              data: this.dataNum.map(el => {
                let str = "";
                switch (el.length) {
                  case 5:
                    str = el.substring(0, 4);
                    break;
                  case 6:
                    str = el.substring(0, 5);
                    break;
                  case 7:
                    str = el.substring(0, 6);
                    break;
                }
                return Number(str);
              })
            }
          });
        }
      });
    },
    drawBar2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = this.$echarts.init(document.querySelector(".main .bar2"));
      this.myChart2 = myChart2;
      myChart2.setOption({
        color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{a}</br>  ({c}%)  "
        },
        grid: {
          left: "0%",
          top: "10%",
          right: "0%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: [],
          // 不显示刻度
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#8F9399",
              fontSize: "12"
            },
            formatter: item => {
                return item.substring(0,item.length);
                // return item.substring(0,item.length - 3) + "\n职能组";
            }
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#8F9399",
              fontSize: "12"
            },
            formatter: "{value}%"
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          },
          splitLine: {
            lineStyle: {
              color: "#EDEDED"
            }
          }
        },
        series: {
          name: "开发已完成率",
          type: "bar",
          barWidth: "10",
          data: [],
          itemStyle: {
            normal: {
              barBorderRadius: 20,
              color: "#00B98D"
            }
          }
        }
      });

      window.addEventListener("resize", function() {
        myChart2.resize();
      });
    }
  },
  mounted() {
    this.drawBar2();
    this.getData();
  }
};
</script>

<style lang="scss" scoped></style>
